<template>
  <div class="tag-navigation">
    <div
      v-for="(tag, index) in tags"
      :key="index"
      class="tag-item"
      :class="{ 'active': activeIndex === index }"
      @click="activeIndex = index"
    >
      {{ tag }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tags = ref([
  '热血', '古风', '玄幻', '奇幻', '悬疑', '都市',
  '历史', '武侠仙侠', '游戏竞技', '悬疑灵异',
  '架空', '青春', '西幻', '现代', '全部>'
]);

const activeIndex = ref(0); // 默认选中第一个
</script>

<style scoped lang="scss">
.tag-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px;
  background-color: rgb(33, 31, 31);
  border-radius: 8px;


  .tag-item {
    padding: 8px 25px;
    border-radius: 20px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    &:hover {
     color: lightgray;

    }

  }
}


</style>
